import './index.less';
import * as echarts from 'echarts';
// import { option } from "./option.ts";
import { useEffect, useRef } from "react";
import useAppState from "../../store";

const CalendarGraph = () => {
    // 使用 useRef 持久化保存 ECharts 实例
    const chartRef = useRef<echarts.ECharts | null>(null);
    const chartContainerRef = useRef<HTMLDivElement | null>(null);
    const {graphData} = useAppState();

    useEffect(() => {
        // 初始化逻辑（仅执行一次）
        if (!chartRef.current && chartContainerRef.current) {
            // 1. 初始化图表
            chartRef.current = echarts.init(chartContainerRef.current);

            // 2. 添加窗口自适应监听
            const resizeHandler = () => chartRef.current?.resize();
            window.addEventListener('resize', resizeHandler);

            // 3. 组件卸载时的清理函数
            return () => {
                window.removeEventListener('resize', resizeHandler);
                chartRef.current?.dispose();
                chartRef.current = null;
            };
        }
    }, []);

    // 配置更新逻辑（testData 变化时触发）
    useEffect(() => {
        if(graphData.nodes.length===0) return;
        if (chartRef.current) {
            const xData = []
            for(let i=0;i<graphData.nodes.length;i++) xData.push(`${graphData.nodes[i].data.ChemicalFormula}-${graphData.nodes[i].id}`);
            const yData = [];
            for(let i=0;i<graphData.nodes[0].data["feature_vector"].length;i++) yData.push(i);
            const data=[]
            let all_feature_vector=[];
            for(let i=0;i<graphData.nodes[0].data["feature_vector"].length;i++)
            {
                for(let j=0;j<graphData.nodes.length;j++){
                    const tempdata = parseFloat((graphData.nodes[j].data["feature_vector"][i]*100).toFixed(2));
                    all_feature_vector.push(tempdata);
                    const x=`${graphData.nodes[j].data.ChemicalFormula}-${graphData.nodes[j].id}`;
                    data.push([x,i,tempdata])
                }
            }
            const option = {
                tooltip: {
                    position: 'top',
                    formatter:function (params) {
                        const xValue=params.value[0].split('-')[0]
                        // 默认内容格式（标题）
                        let content = params.seriesName + '<br/>'+`
                    ${params.marker}
                    <span>${xValue}</span>:
                    ${params.value[2]}
                    <br/>
                `;
                        return content;
                    }
                },
                grid: {
                    height: "70%",
                    width: "86%",
                    left: "10%",
                    top: "15%",
                },
                xAxis: {
                    type: 'category',
                    data: xData,
                    splitArea: {
                        show: true
                    },
                    axisLabel: {
                        show: false // Hide x-axis labels
                    },
                    axisTick: {
                        show: false // Hide x-axis ticks
                    }
                },
                yAxis: {
                    type: 'category',
                    data: yData,
                    splitArea: {
                        show: true
                    },
                    axisLabel: {
                        show: false // Hide y-axis labels
                    },
                    axisTick: {
                        show: false // Hide y-axis ticks
                    }
                },
                dataZoom: [
                    {
                        type: 'slider',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,
                        end: 2,
                        bottom: '5%',
                        showDetail: true,
                        labelFormatter: (value) => {
                            console.log(xData[value])
                            console.log(value);
                            return xData[value].split('-')[0];
                        },
                    },
                    {
                        type: 'slider',
                        show: true,
                        yAxisIndex: [0],
                        start: 10,
                        end: 22,
                        left: '2%',
                        orient: 'vertical'
                    },
                    //下面是配置能否滚轮缩放
                    {
                        type: 'inside',
                        xAxisIndex: [0]
                    },
                    {
                        type: 'inside',
                        yAxisIndex: [0]
                    }
                ],
                visualMap: {
                    min:Math.min(...all_feature_vector),
                    max: Math.max(...all_feature_vector),
                    calculable: true,
                    orient: 'horizontal',
                    left: 'center',
                    top: '0%',
                    // 灰蓝色渐变配置
                    inRange: {
                        // color: ["rgb(208,209,230)", "rgb(166,189,219)", "rgb(116,169,207)", "rgb(43,140,190)", "rgb(4,90,141)"],
                        color:[
                            "rgb(240,234,224)",  // 浅米白
                            "rgb(222,209,191)",  // 沙色
                            "rgb(201,184,161)",  // 浅陶土色
                            "rgb(175,156,133)",  // 灰驼色
                            "rgb(147,128,107)"   // 深卡其色
                        ],
                        // color: [
                        //     "rgb(227,220,227)",  // 浅灰紫（类似褪色薰衣草）
                        //     "rgb(200,185,202)",  // 香芋灰紫
                        //     "rgb(166,148,170)",  // 灰紫藤色
                        //     "rgb(132,112,137)",  // 深灰紫
                        //     "rgb(97,77,103)"     // 暗灰紫
                        // ]
                        // 可选：控制颜色过渡的平滑度
                        // colorSaturation: [0.3, 0.8],
                        // symbolSize: [10, 50]
                    },
                    // 可选：文本标签样式
                    textStyle: {
                        color: '#333'
                    }
                },
                series: [
                    {
                        name: 'Feature_Vector',
                        type: 'heatmap',
                        data: data,
                        // emphasis: {
                        //     itemStyle: {
                        //         shadowBlur: 10,
                        //         shadowColor: 'rgba(0, 0, 0, 0.5)'
                        //     }
                        // },
                        itemStyle: {
                            // color: "#ff0000", // 设置格子的颜色
                            borderWidth: 1, // 设置格子的边框宽度
                            borderColor: "#ffffff", // 设置格子的边框颜色
                        },
                    }
                ]
            };

            // option.visualMap.min=Math.min(...all_feature_vector);
            // option.visualMap.max=Math.max(...all_feature_vector);
            // option.xAxis.data=xData;
            // option.yAxis.data=yData;
            // option.series[0].data=data;
            // 使用 setOption 更新配置而非重新初始化
            chartRef.current.setOption(option);
        }
    }, [graphData]);

    return (
        <div
            id="CalendarGraph"
            ref={(el) => {
                chartContainerRef.current = el;
            }}
        />
    );
};

export default CalendarGraph;
